<template>
	<view class="content">
		<u-navbar class="head-index" :autoBack="false" :fixed="false" :safeAreaInsetTop="true" titleStyle="color:#fff"
			:title="ShowRecoverForm ? '找回密码' : '设置新密码'">
			<view class="u-nav-slot" slot="left">
				<u-icon v-if="!ShowChangePwd" name="arrow-left" size="19" color="#fff" @click="ToBack"></u-icon>
			</view>
		</u-navbar>


		<view v-if="!ShowChangePwd" class="MainBox">
			<!-- 修改密码 -->
			<view v-if="!ShowRecoverForm" class="ChangePwdBox">
				<uni-forms ref="baseForm" :modelValue="PasswordModel" label-position="left" class="FormDataBox">
					<uni-forms-item :label-width="100" label="原密码" required name="OldPwd">
						<uni-easyinput type="text" v-model="PasswordModel.OldPwd" trim="all" :inputBorder="false"
							placeholder="请输入原密码" :placeholderStyle="placeholderStyle"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item :label-width="100" label="新密码" required name="NewPwd">
						<uni-easyinput type="password" v-model="PasswordModel.NewPwd" trim="all" :inputBorder="false"
							placeholder="请输入新密码" :placeholderStyle="placeholderStyle"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item :label-width="100" label="确认新密码" required name="NewPwdAgain">
						<uni-easyinput type="password" v-model="PasswordModel.NewPwdAgain" trim="all"
							:inputBorder="false" placeholder="请确认新密码"
							:placeholderStyle="placeholderStyle"></uni-easyinput>
					</uni-forms-item>

				</uni-forms>

				<view class="BtnBox">
					<view class="BtnMainBox">
						<button class="saveBtn" @click="SubChangePwd('baseForm')">保存</button>
					</view>
					<view class="BtnMainBox">
						<button class="FindBtn" disabled @click="RecoverPwdBtn">忘记密码</button>
					</view>
				</view>
			</view>


			<!-- 找回密码 -->
			<view v-else class="RecoverPwdBox">
				<uni-forms ref="RecoverForm" :modelValue="FormData" label-position="left" class="FormDataBox">
					<uni-forms-item :label-width="100" label="账号" required name="Account">
						<uni-easyinput type="text" v-model="FormData.Account" trim="all" :clearable="false"
							:disabled="true" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item :label-width="100" label="验证码" required name="Captcha">
						<u-input placeholder="请输入验证码" v-model="FormData.Captcha">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u-input>
					</uni-forms-item>


				</uni-forms>

				<view class="BtnBox">
					<view class="BtnMainBox">
						<button class="saveBtn" @click="GetRecoverPwdBtn">确认</button>
					</view>
					<view class="BtnMainBox">
						<button class="FindBtn" @click="CancelRecoverBtn">取消</button>
					</view>
				</view>
			</view>


		</view>

		<view v-else class="MainBox">
			<view class="BoxComStyle" v-if="ChangePwd">
				<view class="TextBox">
					<view class="TextMainBox">
						<uni-icons type="checkbox" color="#51d0d0" size="100"></uni-icons>
					</view>
					<view class="TextMainBox">
						<text class="text">密码重置成功</text>
					</view>
					<view class="TextMainBox">
						<text class="text">您的密码已重置成功，请重新登录</text>
					</view>
				</view>

				<view class="BackBtnBox">
					<button @click="LoginOut" class="GoBackBtn">
						重新登录({{CountdownTime}}s)
					</button>
				</view>
			</view>



			<view class="BoxComStyle" v-else>
				<view class="TextBox">
					<view class="TextMainBox">
						<uni-icons type="checkbox" color="#51d0d0" size="100"></uni-icons>
					</view>
					<view class="TextMainBox">
						<text class="text">密码已找回</text>
					</view>
					<view class="TextMainBox">
						<text class="text">您的密码已找回，建议记住您的密码</text>
					</view>
				</view>

				<view class="x-c" style="margin-top: 30px;color: #999;">
					<view>
						<text>账号:</text>
						<text>188 8888 8888</text>
					</view>
					<view style="margin-left: 10px;">
						<text>密码:</text>
						<text>123456</text>
					</view>
				</view>

				<view class="FindBtnBox">
					<button class="Btn" @click="ToBack(1)">记住密码并返回</button>
					<button class="Btn" @click="ToBack(0)">返回</button>
				</view>
			</view>


		</view>


		<!-- 滑块验证 -->
		<m-slider-verify style="zoom: .8;" :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult"
			ref="verifyElement"></m-slider-verify>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				ShowChangePwd: false, // 是否操作了密码
				ChangePwd: false, // 完成修改密码 / 找回密码 -- true 展示完成倒计时盒子，准备退出登录
				CountdownTime: 5, // 倒计时时间
				Timer: null, // 接收定时器
				ShowRecoverForm: false, // 是否展示找回密码盒子
				sliderVerifyFLag: false, //滑块验证
				placeholderStyle: "font-size:15px;color:#c0c4cc;", // 输入框 placeholder 样式
				PasswordModel: { // 修改密码表单
					OldPwd: '',
					NewPwd: '',
					NewPwdAgain: '',
				},
				FormData: { // 找回密码表单
					Account: '18888888888', // 账号
					Captcha: '', // 验证码
				},
				rules: { // 自定义校验
					OldPwd: {
						rules: [{
							required: true,
							errorMessage: '请输入原密码'
						}]
					},
					NewPwd: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码'
						}]
					},
					NewPwdAgain: {
						rules: [{
							required: true,
							errorMessage: '请确认新密码',
						}, {
							validateFunction: this.NewPwdAgainRulesFun // 直接写方法 this指向有点问题，所以绑在方法上
						}]
					}
				},
				timeData: {},
				CaptchaTimer: null, // 用于监听验证码的值
			};
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		onLoad() {
			var that = this
		},
		watch: {
			ShowChangePwd: { // 监听是否操作密码
				handler() {
					var that = this

					if (that.ShowChangePwd) {
						if (that.ChangePwd) { // 当 是修改密码时，开启倒计时的定时器
							that.Timer = setInterval(() => {
								that.CountdownTime--
							}, 1000);
						}
					}
				},
				deep: true,
				immediate: true
			},
			'FormData.Captcha': { // 验证码的值，感觉意义不大
				handler(newValue, oldValue) {
					var that = this
					clearTimeout(that.CaptchaTimer)

					that.CaptchaTimer = setTimeout(() => {
						console.log('v-model', newValue);
					}, 500)
				}
			},
			CountdownTime(val) { // 监听秒数
				var that = this
				if (val == 0) {
					// 关闭定时器
					clearInterval(that.Timer)

					// 退出登录
					that.LoginOut()
				}
			}
		},
		onBackPress(options) { // 监听页面返回
			console.log(options)
			// 监听返回键关闭、侧滑关闭
			if (options.from == 'navigateBack') {
				// this.ToBack();
				return false;
			} else {
				return true

			}
		},
		onUnload() {
			uni.hideToast();
		},
		methods: {
			NewPwdAgainRulesFun(rule, value, data, callback) { // 自定义确认密码的自定义校验
				if (value !== this.PasswordModel.NewPwd) {
					callback('两次输入的密码不一致')
				} else {
					callback()
				}

			},
			verifyResult(res) { // 滑块验证结果回调函数
				var that = this
				this.sliderVerifyFLag = false;

				if (res) { //校验通过
					// console.log(res)
					// 如果输入的旧密码与原密码不一致，提示错误
					if (that.PasswordModel.OldPwd != that.$store.state.UserInfo.UserPwd) {
						return uni.showToast({
							title: `请输入正确的原密码`,
							icon: "none",
							duration: 2000
						})
					}

					uni.showToast({
						title: `校验通过`
					})

					// 通过之后，开启加载动画，表明正在调用接口，修改成功后，退出登录
					setTimeout(() => {
						uni.hideToast();

						that.$utils.showLoading();

						// 修改密码
						that.Request.request('updateUserPwd', {
							oldPwd: that.PasswordModel.OldPwd,
							newPwd: that.PasswordModel.NewPwd,
							userId: that.$store.state.UserInfo.UserID,
						}, function(ret) {
							console.log(JSON.stringify(ret))
							// if (ret.status == 200) {

							// }
							setTimeout(() => {
								that.$utils.hideLoading();

								uni.showToast({
									title: `密码修改成功`
								})

								that.ShowChangePwd = true;


							}, 2000);
						});


					}, 2000)


				} else {
					// 校验失败,点击关闭按钮
				}
			},
			SubChangePwd(ref) { // 提交修改
				var that = this
				this.$refs[ref].validate().then(res => {
					// console.log('success', res);
					setTimeout(() => {
						that.ChangePwd = true // 展示完成修改密码盒子
						// 打开
						that.sliderVerifyFLag = true;
					}, 500)

				}).catch(err => {
					console.log('err', err);
				})
			},
			RecoverPwdBtn() { // 点击找回按钮，展示找回盒子
				var that = this

				that.$utils.showLoading();
				setTimeout(() => {
					that.ShowRecoverForm = true

					that.$utils.hideLoading();
				}, 600)
			},
			GetRecoverPwdBtn() { // 找回密码确认按钮
				this.ChangePwd = false // 展示完成找回盒子
				this.sliderVerifyFLag = true
			},
			CancelRecoverBtn() { // 点击取消关闭找回盒子
				var that = this

				that.$utils.showLoading();
				setTimeout(() => {
					that.ShowRecoverForm = false

					that.$utils.hideLoading();
				}, 600)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');

						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			ToBack() { // 返回上一页
				uni.navigateBack();
			},
			LoginOut() { // 退出登录
				var that = this;
				// 关闭自动登录
				uni.removeStorageSync('Automatic_Login');


				let UserInfo = that.$store.state.UserInfo;

				UserInfo['UserPwd'] = '';

				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'UserInfo',
					data: UserInfo,
					StorageName: 'UserInfo',
					StorageData: JSON.stringify(UserInfo)
				})

				// uni.reLaunch({
				// 	url: '/pages/login/login',
				// });
				// 重启设备
				plus.runtime.restart();
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.content {
		background-color: #f8f8f8;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.MainBox {
			padding: 10px 20px;

			.ChangePwdBox {}

			.FormDataBox {
				padding: 10px 20px;
				background-color: #fff;
				border-radius: 12px;
				box-shadow: 1px 1px 13px -12px #333;

				.uni-forms-item {
					background-color: #fff !important;

					// 增强输入框
					.uni-easyinput__content-input {
						padding-left: 0 !important;

						.uniui-eye-filled {
							color: #c0c4cc !important;
						}

						.uniui-eye-slash-filled {
							color: #c0c4cc !important;
						}
					}
				}

			}


			.FindBox {
				min-height: 200px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: 20px;
				background-color: #fff;
				padding: 30rpx 0;
			}

			// 操作密码后，显示盒子的公共样式
			.BoxComStyle {

				.TextBox {
					min-height: 200px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-top: 20px;
					background-color: #fff;
					padding: 30rpx 0;

					.TextMainBox {
						text-align: center;
					}

					.TextMainBox:nth-child(2) {
						margin-top: 10px;
					}

					.TextMainBox:nth-child(2) .text {
						font-size: 18px;
						color: #333;
					}

					.TextMainBox:last-child {
						margin-top: 20px;
					}

					.TextMainBox:last-child .text {
						font-size: 14px;
						color: #999;
					}
				}

				.BackBtnBox {
					margin-top: 40rpx;

					// 修改密码后的 返回按钮
					.GoBackBtn {
						width: 80%;
						background-color: #51d0d0;
						color: #fff;
					}
				}

				// 找回密码后的 按钮组
				.FindBtnBox {
					display: flex;
					align-items: center;
					width: fit-content;
					margin: 30px auto;

					.Btn:first-child {
						background-color: #51d0d0;
						color: #fff;
						width: fit-content;
						margin-right: 20rpx;
					}

					.Btn:last-child {
						background-color: #fff;
						color: #333;
						width: fit-content;
					}
				}
			}

			.RecoverPwdBox {

				// 输入框禁用样式
				.is-disabled {
					background-color: transparent !important;
					border: none !important;
					color: #323232;
				}

				.uni-forms-item:first-child .is-required {
					visibility: hidden;
				}

			}

		}

		// 按钮的边框线在这里去除
		uni-button:after {
			border: none !important;
		}

		// 按钮组公共样式
		.BtnBox {
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.BtnMainBox {
				flex: 1;

				.saveBtn {
					width: 80%;
					background-color: #51d0d0;
					color: #fff;
				}

				.FindBtn {
					width: 80%;
					background-color: #fff;
				}
			}
		}
	}
</style>